<template>
    <div class="callContent">
        <div class="phoneWindow">
            <span>{{ phoneNumber }}</span>
        </div>
        <div style="width: 100%;height: 20px;"></div>
        <div class="custom-layout">
            <!-- <van-cell @touchstart.stop="showKeyboard = true">弹出默认键盘</van-cell> -->
            <van-number-keyboard
                v-model="phoneNumber"
                :show="showKeyboard"
                @blur=""
                @input="onInput"
            />
            <div class="callBtn" @click="callNumber(phoneNumber)">
                <SvgIcon width="70px" height="70px" name="call" color="#fff"></SvgIcon>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog } from 'vant'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()

const showKeyboard = ref<boolean>(true)
const phoneNumber = ref<string>('')


const onInput = (value) => {
    console.log('onInput', value)
};

const callNumber = (str: string) => {
    if (str == '') {
        showFailToast('无号码可拨打')
        return
    }
    showConfirmDialog({
        title: '',
        message: `当前号码为${str}确认要拨打电话吗？`,
    }).then(() => {
        let a = document.createElement("a");//创建a标签
        a.setAttribute("href", `tel:${str}`);//设置文件下载地址
        a.setAttribute("id", "tel");
        document.body.appendChild(a);//添加到body
        console.log('tel', document.getElementById('tel'));
        a.click();//触发事件
        document.body.removeChild(a);//移除标签
    })
    .catch(() => {
        // on cancel
    })
}

const copy = (mes: string) => {
    var input = document.createElement('input') 
    input.value = mes 
    document.body.appendChild(input) 
    input.select() 
    document.execCommand('copy') 
    document.body.removeChild(input)
    showToast('复制成功')
}


onMounted(() => {
    showConfirmDialog({
        title: '',
        message: '不支持通话的设备将无法进行拨打，继续使用请点击确认',
    }).then(() => {
        return true
    })
    .catch(() => {
        // on cancel
        router.back()
    })
})

</script>


<style lang="scss" scoped>
.callContent {
    width: 100%;
    height: 93vh;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    .phoneWindow {
        width: 410px;
        max-width: 410px;
        height: 100px;
        flex: 1;
        // aspect-ratio: 1 / 1;
        background-image: url("@/assets/img/pingmu.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2),
        0 -6px 10px rgba(255, 255, 255, 0.4);
        overflow: hidden;
        border-radius: 16px;
        padding: 0px 40px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        word-wrap: break-word;
        span {
            color: #000;
            font-size: 30px;
            text-align: center;
            line-height: 100%;
            overflow: hidden;
            font-weight: 500;
        }
    }
    .custom-layout {
        width: 410px;
        max-width: 410px;
        height: 302px;
        position: relative;
        overflow: hidden;
        padding: 0 10px;
        :deep(.van-number-keyboard) {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            bottom: 70px;
        }
        .callBtn {
            width: 100%;
            height: 70px;
            position: absolute;
            left: 0;
            bottom: 0;
            background: var(--background);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>